﻿<!DOCTYPE html>
<html dir="RTL">
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<body>
<table id="main_table">
    <tr>

            <label style="position: relative; top: 35px; right: 600px;" id="string_painted">مستوى التقدم---</label>

        <td colspan="3" style="width: 100%;">
            <meter id="progress" max="100" value="0"></meter>
        </td>
    </tr>
    <tr>
        <td id="main_column" colspan="2">
            <iframe id='external' src='' scrolling="no"></iframe>
        </td>
        <td style="text-align: center; vertical-align: text-top;">
            <img id="avatar" src="avatar.jpg" title="تغير الصورة الرمزية" style="cursor: pointer;"/>
            <input type="file" id="file" style="overflow: hidden; visibility: hidden;">
            <h3>نبذة عني: </h3>
            <div id="info">
                <span>الاسم: حسن الفار </span><br />
                <span>السن: 10 اعوام</span><br />
                <span> طالب فالصف الخامس الابتدائي و مبحبش الكيميا</span>
            </div><br />
            <button id="edit">تعديل</button>
            <button id="back">&gt&gt</button>
            <button id="logout">تسجيل خروج</button>
        </td>
    </tr>
   
</table>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#external").attr("src", "homepage.html");
        $("#progress").animate({value:19}, 1000, null, function ()
        {
            $("#string_painted").html("مستوى التقدم " + $("#progress").val() + "%");
        });
        $("#back").click( function ()
        {
            document.getElementById("external").contentWindow.history.back();
        });
        $(document).on("click", "#logout", function ()
        {
            window.location = "index.html";
        });
        $(document).on("click", "#edit", function ()
        {
            nabza = prompt("أدخل نبذة عنك جديدة ");
            if(nabza != "" && nabza != null) {
              $("#info").html(nabza);
            }
        });
        $(document).on("click", "#avatar", function ()
        {
            $('#file').trigger('click');
            $("#avatar").attr("src", "cartoon_avatar.png");
        });
        $(document).on("mouseover", "#avatar", function ()
        {
            $(this).css("border", "3px solid #003366");
        });
        $(document).on("mouseout", "#avatar", function ()
        {
            $(this).css("border", "0");
        });
    });
</script>
</body>
</html>